此篇文章同步發表於我的部落格finalevil's blog
這個外掛用來「延遲載入圖片」,也就是說當網頁開啟以後,僅載入視線所及的範圍內的圖片,在畫面以外的圖片先暫時不載入,當捲動捲軸看到圖片所在的位置時,才開始載入那張圖片。
這樣做對於網頁使用者的好處是
(1)當網站要顯示的圖片過多的時候不會造成資料擁擠,也不會使你家的網路塞車,造成有些圖片無法顯示必須重新按下F5重新載入的窘境。
(2)對於開發者而言,也可以避免一瞬間的流量暴衝,而導致伺服器無法負荷。
光是這兩個優點利多(最近看股票看太多的後遺症XD),我就會建議大家沒事的時候為你的網站加上這個外掛。
lazyload下載網址:<http://www.appelsiini.net/projects/lazyload >
這個plugin使用的方式很簡單,將js加入網站,接著加入以下語法就可以了。
$("img").lazyload();
如果想用fadeIn特效來顯示圖片也可以加上一些設定參數,如下:
$("img").lazyload( { effect : "fadeIn" } );
事實上lazyload預設的特效是show,也就是沒有特效直接顯示,作者也沒有特別說明還可以使用哪些特效,但是你可以透過jQuery文件找到其他特效的名稱,像是slideDown、slideUp等當作輸入參數,如下:
$("img").lazyload( { effect : "slideDown" } );
其他更詳細的內容請參考我的部落格finalevil's blog